<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
	<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta charset="utf-8">
<jsp:include page="/common/commonCss.jsp"></jsp:include>
<jsp:include page="/common/commonJs.jsp"></jsp:include>
<script src="${basePath}commonJs/jquery.imageScroller.js"></script>
<script language="javascript"
	src="${basePath }commonJs/tags/My97DatePicker/WdatePicker.js"></script>
<title>嘉童游乐中心</title>
<style>
#btnPrev,#btnNext,#listBox {
	float: left;
}

#btnPrev,#btnNext {
	width: 30px;
	height: 18px;
	line-height: 18px;
	padding: 41px 0;
	text-align: center;
}

#listBox {
	width: 990px;
	height: 205px;
	overflow: hidden;
}

#container {
	width: 1060px;
	height: 205px;
}
</style>
<script type="text/javascript">
$(function() {
	$("#listBox").imageScroller({
		next : "btnNext",
		prev : "btnPrev",
		frame : "list",
		child : "li",
		auto : false
	});
});

//搜索视图
function listVip() {
	$("#queryType").val("1");//设置查询类型为视图（分别是否分页）
	$.ajax({
		cache : false,
		type : "post",
		dataType : "json",
		url : "listVipAjax.shtml",
		data :$("#queryForm").serialize(),
		complete : function() {
		},
		success : function(data) {//data为返回的数据，在这里做数据绑定
			$("#list li").remove();
			if (data == null || data.length == 0) {
				alertInfo("没有匹配的记录！");
			} else {
				trimJsonArray(data);
				var li;
				for (var i = 0; i < data.length; i++) {
					var member = data[i];
					
					//判断小朋友头像背景色
					var status=member.status;
					var isBlack=member.isBlack;
					var bgColor="coll_img colle_img_lv";
					if(isBlack==1 || status==3 || status==4){//红色-问题（过期/黑名单/停卡）
						if((member.inTime!=null && member.inTime!="") && (member.outTime==null || member.outTime=="")){//绿色-场内
							bgColor="coll_img colle_img_lv";
						}else{//灰色-场外
							bgColor="coll_img colle_img_red";
						}
					}else{
						if((member.inTime!=null && member.inTime!="") && (member.outTime==null || member.outTime=="")){//绿色-场内
							bgColor="coll_img colle_img_lv";
						}else{//灰色-场外
							bgColor="coll_img colle_img_ccc";
						}
					}
					var memName="";
					if(member.name!=null){
						memName=member.name;
						if(memName.length>5){
							memName=memName.substring(0, 5)+"...";
						}
					}
					li = '<li title='+member.name+'>';
				/* if(isBlack==1){
					li += '	<a href=javascript:alertWarning("此会员已移入黑名单，请先解除!") >';
				}else{
					li += '	<a href="getVipUserDetail.shtml?memberId=' + member.pkMemId + '&type=1&hisType=' + member.hisType + '&inTime=' + member.inTime + '&outTime=' + member.outTime + '" >';					
				} */
					li += '	<a href="getVipUserDetail.shtml?memberId=' + member.pkMemId + '&type=1&hisType=' + member.hisType + '&inTime=' + member.inTime + '&outTime=' + member.outTime + '" >';
					li += '		<p class="' + bgColor + '"><img width="102" height="136" src="${basePath}common/showImage.shtml?imagePath='
							+ member.imagePath + ' "></p>';
					li += ' 		<dl class="collection_t_l_dl">';
					li += ' 		<dd>'
							+ memName + '  ' + member.age + '岁 ' 
							+ (member.isVip == 1 ? '<a  style="color:red">VIP</a>' : ' ') 
							+ '</dd>';
					if (member.memType == 1) {
						li += ' 		<dd class="f11">会员 <span class="f9">'
								+ member.pkMemId
								+ '</span></dd>';
						li += ' 		<dd>' + member.memberCardName
								+ '</dd>';
					} else if (member.memType == 2) {
						li += ' 		<dd class="f11">非会员</dd>';
						li += ' 		<dd></dd>';
					} else if (member.memType == 3) {
						li += ' 		<dd class="f11">访客</dd>';
						li += ' 		<dd></dd>';
					}
					li += ' 		</dl>';
					li += '	</a>';
					li += '</li>';
					$("#list").append(li);
				}
			}
			return;
		},
		error : function(XMLHttpRequest) {
			ajaxError(XMLHttpRequest);
		}
	});
}
</script>
</head>

<body class="bg">
	<div class="content m_auto">
		<div class="content_l mt10">
			<ul>
				<shiro:hasPermission name="filemanagement/listVip.shtml?type=1">
					<li class="content_hover"><a href="${basePath }filemanagement/listVip.shtml?type=1"><i class="nav_icon_b"></i><br>会员管理</a></li>
				</shiro:hasPermission>
				<shiro:hasPermission name="filemanagement/viewVistors.shtml?type=3">
            		<li><a href="${basePath }filemanagement/viewVistors.shtml?type=3"><i class="nav_icon_d"></i><br>访客管理</a></li>
            	</shiro:hasPermission>
            	<shiro:hasPermission name="filemanagement/listViewSingelTicket.shtml?type=2">
           			<li><a href="${basePath }filemanagement/listViewSingelTicket.shtml?type=2"><i class="nav_icon_a"></i><br>非会员管理</a></li>
           		</shiro:hasPermission>
           		<shiro:hasPermission name="parreserve/parReserveManages.shtml?indexflag=">
					<li><a href="${basePath }parreserve/parReserveManages.shtml?indexflag="><i class="nav_icon_g"></i><br>预约管理</a></li>
				</shiro:hasPermission>
           		<shiro:hasPermission name="filemanagement/customer/serviceList.shtml">
            		<li><a href="${basePath}filemanagement/customer/serviceList.shtml"><i class="nav_icon_h"></i><br>客户服务</a></li>
            	</shiro:hasPermission>
           		<shiro:hasPermission name="crm/jumpCrm.shtml">
					<li><a href="${basePath }crm/jumpCrm.shtml"><i class="nav_icon_n"></i><br>客户关系管理</a></li>
				</shiro:hasPermission>
			</ul>
		</div>
		<div class="content_r mt10">
			<div class="p20">
				<div class="file_single_dl f14 fixed">
					<form action="${basePath}filemanagement/listModeVip.shtml" id="queryForm" name="queryForm" method="post">
					<input type="hidden" name="pageSize" value="10">
					<input type="hidden" name="pageNo" value="1">
					<input type="hidden" id="queryType" name="queryType" value="1">
					<!-- index页面传入 -->
					<input type="hidden" id="indexBirth" name="indexBirth" value="${indexBirth }">
					<input type="hidden" id="indexEndDate" name="indexEndDate" value="${indexEndDate }">
					
					<dl class="fixed" style="overflow: hidden">
						<dd>
							<label>姓名/电话/邮箱：</label><input type="text" class="iput_t w200" id="condition" name="condition">
							<input type="hidden" name="type" value="1">
						</dd>
						<dd>
							<label>会员状态：</label>
							<div class="uboxstyle">
								<select id="status" name="status">
									<option value="">全部</option>

									<option value="1">未激活</option>

									<option value="2">有效</option>

									<option value="3">过期</option>

									<option value="4">停卡</option>
									
									<option value="5">新建</option>
								</select>
							</div>
						</dd>
						<dd>
							<label>会员生日：</label> <input title="" type="text" name="birthdayStartDate"
								id="birthdayStartDate"
								onClick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})"
								class="Wdate iput_t w82" readonly="readonly" />&nbsp;至&nbsp;<input title="" type="text" name="birthdayEndDate"
								id="birthdayEndDate"
								onClick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})"
								class="Wdate iput_t w82" readonly="readonly" />
						</dd>
						<dd>
							<label>生效日期：</label><input title="" type="text" name="joinStartDate"
								id="joinStartDate"
								onClick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})"
								class="Wdate iput_t w82" readonly="readonly" />&nbsp;至&nbsp;<input title="" type="text" name="joinEndDate"
								id="joinEndDate"
								onClick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})"
								class="Wdate iput_t w82" readonly="readonly" />
						</dd>
						<dd>
							<label>失效日期：</label><input title="" type="text" name="invalidStartDate"
								id="invalidStartDate"
								onClick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})"
								class="Wdate iput_t w82" readonly="readonly" />&nbsp;至&nbsp;<input title="" type="text" name="invalidEndDate"
								id="invalidEndDate"
								onClick="WdatePicker({dateFmt:'yyyy/MM/dd',isShowWeek:true,isShowClear:true,readOnly:true})"
								class="Wdate iput_t w82" readonly="readonly" />
						</dd>
						<dd>
							<label>关联销售：</label>
							<div class="uboxstyle">
								<select id="pkUsrId" name="pkUsrId">
								</select>
							</div>
						</dd>
						<dd>
							<label>所属门店：</label>
							<div class="uboxstyle">
								<select id="fkBranId" name="fkBranId">
								</select>
							</div>
						</dd>
					</dl>

					<input type="button" id="searchBtn" class="btn fr ml10" value="查询"> <input type="button" class="btn fr ml10" value="购买会籍" onClick="location.href='${basePath }membership/member/jumpMember.shtml'">
					</form>
				</div>

				<div class="tab_normal mt10">
					<ul class=" fixed" id="tab_a">
						<li id="viewLi">视图样式</li>
						<li id="listLi">列表样式</li>
					</ul>
					<ul class="fixed" id="tab_conbox_a">
						<li class="p10 h450">
							<div id="container" class="collection_b ml50 fixed w800 border_top">
            					<div id="btnNext"><a href="javascript:void(0);" class="collection_t_l"></a></div>
            	 				<div id="listBox">
            					<ul id="list">
                 					
               					</ul>
                				</div>
                				<div id="btnPrev"><a href="javascript:void(0);" class="collection_t_r"></a></div>
            				</div>
						</li>
						<li class="p10 h450">
							<table id="listTable" class="table">
								<tr>
									<th>会员#</th>
									<th>状态</th>
									<th>姓名</th>
									<th>性别</th>
									<th>年龄</th>
									<th>国籍</th>
									<th>VIP</th>
									<th>会员类型</th>
									<th>生日</th>
									<th>有效期限</th>
									<th>操作</th>
								</tr>
							</table> 
							<!---翻页-->
							<div class="page fr m10" id="foot1"></div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
	// 加载销售下拉框
	loadSales();
	
	//加载门店信息
	loadBrans();
	
	
	// 默认视图模式绑定事件
	//判断是否本页还是首页传入
	var indexBirth="${indexBirth}";
	var indexEndDate="${indexEndDate}";
	if((indexBirth!=null && indexBirth!="") || (indexEndDate!=null && indexEndDate!="")){
		initTab();
		$("#listLi").click();
	}else{
		listVip();
	}

	// 列表模式绑定事件
	$("#listLi").click(function() {
		initTab();
	});
	
	// 视图模式绑定事件
	$("#viewLi").click(function() {
		//location.href="listVip.shtml";
		listVip();
	});
	
	//搜索按钮绑定事件
	$("#searchBtn").click(function(){
		if($("#viewLi").hasClass("thistab_a")==true && $("#listLi").hasClass("thistab_a")==false){
			//视图模式(现视图模式非无刷新，所以搜索支持列表模式)
			//$('#queryForm').attr('action', '${basePath}filemanagement/listVip.shtml');
			//document.forms[0].submit();
			listVip();
		} else{
			initTab();
			/* //列表模式
			listModeVip(true,$("#condition").val(),$("#status option:selected").val(),$("birthdayStartDate").val(),$("birthdayEndDate").val(),$("joinStartDate").val(),$("joinEndDate").val(),$("invalidStartDate").val(),$("invalidEndDate").val(),$("#pkUsrId option:selected").val()); */
		}
	});
	
});

function initTab(){
	$("#queryType").val("2");//设置查询类型为列表（分别是否分页）
	var form1 = $("#queryForm");
	var pagebean = new PageBean(form1);
	pagebean.setTableId("listTable");
	pagebean.setFootId("foot1");
	pagebean.setCallback(callback);
	setPagebeanObj(pagebean);
	pagebean.doPage();
}

function callback(data){
	trimJsonArray(data);//把字段的null值变味空""
	$.each(data, function(index, item) {
		var itemStatus=parseInt(item.status);
		var status="";
		switch(itemStatus){
			case 1:
				status="未激活";
			  break;
			case 2:
				status="有效";
			  break;
			case 3:
				status="过期";
			  break;
			case 4:
				status="停卡";
			  break;
			default:
				status="新建";
		}
		var isVip="是";
		if(item.isVip=='0'){
			isVip="否";
		}
		var age="0";
		if(item.age!=null){
			age=item.age;
		}
		/* var memType="会员";
		if(item.memType=="2"){
			memType="非会员";
		}
		if(item.memType=="3"){
			memType="访客";
		} */
		var prdName="";
		if(item.prdName!=null){
			prdName=item.prdName;
		}
		var html= "<tr>";
		var isBlack = item.isBlack;
		if(isBlack==1){
			html+="<td class='lv'><a href=javascript:alertWarning('此会员已移入黑名单，请先解除!');>"+item.pkMemId+"</a></td>";
		}else{
			html+="<td class='lv'><a href=getVipUserDetail.shtml?memberId="+item.pkMemId+"&type=1&hisType=" + item.hisType + "&inTime=" + item.inTime + "&outTime=" + item.outTime + ">"+item.pkMemId+"</a></td>";					
		}
		var startDatePage=item.startDatePage;
		var endDatePage=item.endDatePage;
		var valieDate="";
		if((startDatePage!=null && startDatePage!="") && (endDatePage!=null && endDatePage!="")){
			valieDate=item.startDatePage+"-"+item.endDatePage;
		}
		html+="<td>"+status+"</td>"+
			  "<td>"+item.name+"</td>"+
			  "<td>"+item.sex+"</td>"+
			  "<td>"+age+"</td>"+
			  "<td>"+item.countryDesc+"</td>"+
			  "<td>"+isVip+"</td>"+
			  "<td>"+prdName+"</td>"+
			  "<td>"+item.birthdayPage+"</td>"+
			  "<td>"+valieDate+"</td>"+
			  "<td class='lv'><a href=getVipUserDetail.shtml?memberId="+item.pkMemId+"&type=1&hisType=" + item.hisType + "&inTime=" + item.inTime + "&outTime=" + item.outTime + ">详情</a></td>"+
			  "</tr>";
			$("#listTable").find("tr:eq("+index+")").after(html);
	});
}

/**
 * 加载销售信息
 */
function loadSales(){
	 $.ajax({  
	        type: 'get',  
	        url: "listSales.shtml",  
	        cache: false,
	        async: false,
	        dataType: 'json',  
	        success: function(data){ 
	        	$(data).each(function(n){
					$("#pkUsrId").append("<option value='"+this.pkUsrId+"'>"+this.usrName+"</option>");
		        });
	        },  
	        error: function(){  
	            return;  
	        }
	    });  
}

/**
 * 加载门店信息
 */
function loadBrans(){
	 $.ajax({  
	        type: 'get',  
	        url: "listAllBran.shtml",  
	        cache: false,
	        async: false,
	        dataType: 'json',  
	        success: function(branList){ 
	        	$(branList).each(function(n){
	        		$("#fkBranId").append("<option value='"+this.pkBranId+"'>"+this.branName+"</option>");
		        });
	        },  
	        error: function(){  
	            return;  
	        }  
	    });  
}

/**
 * 获取访客列表信息
 */
function listModeVip(flag,condition,pkUsrId){
	var url="listModeVip.shtml";
	$.ajax({  
        type: 'post',  
        url: url,
        data:{
				condition: condition, 
				pkUsrId: pkUsrId,
			},
        cache: false,
        async: false,
        dataType: 'json',  
        success: function(data){ 
        	var html="";
			if(data!=null &&data.length>0){
				$("#listTable tr:not(:first)").remove(); 
				$.each(data, function(index, item) {
					var itemStatus=parseInt(item.status);
					var status="";
					switch(itemStatus){
						case 1:
							status="未激活";
						  break;
						case 2:
							status="有效";
						  break;
						case 3:
							status="过期";
						  break;
						default:
							status="停卡";
					}
					var isVip="是";
					if(item.isVip=='0'){
						isVip="否";
					}
					var age="";
					if(item.age!=null){
						age=item.age;
					}
					var memType="会员";
					if(item.memType=="2"){
						memType="非会员";
					}
					if(item.memType=="3"){
						memType="访客";
					}
					html=html+"<tr>"+
					"	<td><a href=getVipUserDetail.shtml?memberId="+item.pkMemId+"&type=1&hisType=" + item.hisType + "&inTime=" + item.inTime + "&outTime=" + item.outTime + ">"+item.pkMemId+"</a></td>"+
						"<td>"+status+"</td>"+
						  "<td>"+item.name+"</td>"+
						  "<td>"+item.sex+"</td>"+
						  "<td>"+age+"</td>"+
						  "<td>"+item.countryDesc+"</td>"+
						  "<td>"+isVip+"</td>"+
						  "<td>"+memType+"</td>"+
						  "<td>"+item.startDatePage+"-"+item.endDatePage+"</td>"+
						  "</tr>";
				});
				$("#listTable").append(html);
			}else{
				$("#listTable tr:not(:first)").remove();
			}
        },  
        error: function(XMLHttpRequest, textStatus, errorThrown){  
        	alert(errorThrown);
            return;  
        }  
    }); 
}
</script>